<template>
  <div>
    <div class="sku_num_all" v-if="!isEdit">
      <div class="l_title">批量设置：</div>
      <el-checkbox style="margin-right:20px;" v-model="set_all.checked"></el-checkbox>
      <el-input size="mini" placeholder="预售库存" v-model="set_all.activity_stock" style="width:180px;margin-right:20px;"></el-input>
      <el-input size="mini" placeholder="预售价格" v-model="set_all.activity_price" style="width:180px;margin-right:20px;"></el-input>

      <el-button size="mini" style="margin-right:10px;" @click="setAll">应用</el-button>
    </div>
    <el-form ref="formRules" :model="myform" class="form_box" :rules="formRules">
      <el-table class="mt_15" :data="myform.skulist">
        <el-table-column prop="selection" width="55" align="center">
          <template slot-scope="scope">
            <el-checkbox :disabled="isEdit" v-model="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="pvs_value" label="规格名"></el-table-column>
        <el-table-column prop="sell_price" label="售价"></el-table-column>
        <el-table-column prop="total" label="库存"></el-table-column>
        <el-table-column prop="" label="预售库存">
          <template slot-scope="scope">
            <el-form-item :prop="'skulist.' + scope.$index + '.activity_stock'" :rules="!scope.row.checked ? [] : formRules.activity_stock">
              <el-input :disabled="isEdit" size="mini" v-model="scope.row.activity_stock"></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="" label="预售价格">
          <template slot-scope="scope">
            <el-form-item :prop="'skulist.' + scope.$index + '.activity_price'" :rules="!scope.row.checked ? [] : formRules.activity_price">
              <el-input :disabled="isEdit" size="mini" v-model="scope.row.activity_price"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="dialog-footer" style="margin-top: 20px;">
      <el-button @click="outData(false)">取消</el-button>
      <el-button :disabled="isEdit" type="primary" @click="outData(true)">确定</el-button>
    </div>
  </div>
</template>

<script>
import {getPro} from '@/api/shop/product';
import {objextend} from '@/utils/index';
export default {
  data() {
    var checkstock = (rule, value, callback) => {
      let a = rule.field;
      let c = a.replace(/skulist./g, '');
      let d = c.split('.');
      let id = Number(d[0]);
      value = Number(value);
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        let stock = this.myform.skulist[id].total
        if (stock < value) {
          callback(new Error('活动库存不能大于实际库存'));
        } else {
          callback();
        }
      }, 1000);
    };
    var checkprice = (rule, value, callback) => {
      let a = rule.field;
      let c = a.replace(/skulist./g, '');
      let d = c.split('.');
      let id = Number(d[0]);
      value = Number(value);
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        let sell_price = this.myform.skulist[id].sell_price;
        if (sell_price < value) {
          callback(new Error('活动价格不能大于售卖价格'));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      myform: {
        skulist: []
      },
      allchecked: false,
      set_all: {
        activity_stock: '',
        activity_price: '',
        leader_price: ''
      },
      formRules: {
        activity_stock: [
          {
            validator: checkstock,
            trigger: ['blur', 'change']
          }
        ],
        activity_price: [
          {
            validator: checkprice,
            trigger: ['blur', 'change']
          }
        ]
      },
      index: 0
    };
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  mounted() {},
  methods: {
    //SKU批量设置参数
    setAll() {
      this.myform.skulist.forEach(e => {
        for (var prop in this.set_all) {
          if (this.set_all[prop]) {
            e[prop] = this.set_all[prop];
          }
        }
      });
    },

    getskulist(data) {
      console.log(data);
      let _this = this;
      this.index = data.index;
      this.skulist = data.sku || [];
      getPro(data.id).then(res => {
        let json = res.msg;
        let sku = json.sku;
        let skulist = [];
        sku.forEach(a => {
          let skuitem = {
            id: a.id,
            pvs_value: a.pvs_value,
            sell_price: a.inventory.sell_price,
            total: a.inventory.total - a.inventory.sell,
            activity_stock: '',
            activity_price: '',
            checked: false
          };
          let i = _this.skulist.findIndex(_ => _.sku_id == a.id);
          if (i > -1) {
            skuitem.checked = true;
            skuitem = objextend(skuitem, _this.skulist[i]);
          }
          skulist.push(skuitem);
        });
        console.log(skulist);
        this.myform.skulist = skulist;
      });
    },

    outData(type) {
      if (type) {
        let _this = this;
        this.$refs['formRules'].validate(valid => {
          if (valid) {
            let list = _this.myform.skulist;
            let sku = list.filter(_ => _.checked);
            let skulist = [];
            if (sku.length > 0) {
              sku.forEach(a => {
                skulist.push({
                  sku_id: a.id,
                  activity_stock: a.activity_stock,
                  activity_price: a.activity_price
                });
              });
            }
            _this.$emit('outData', skulist, _this.index);
          }
        });
      } else {
        this.$emit('outData', false);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sku_num_all {
  background: #fff;
  display: flex;
  margin-top: 20px;
  padding: 20px 0;
  align-items: center;
  .l_title {
    width: 100px;
    margin-right: 20px;
    text-align: right;
  }
}

.sku_set {
  margin-top: 20px;
  background: #fff;
}
</style>
